import UserLabel from './UserLabel'

interface Room {
  createTime: number,
  gameType: number,
  roomDescribe: string,
  roomNo: string,
  totalTurns: number,
  turns: number
}

interface BattleData {
  backUrl: string,
  finishList: Array<any>,
  room: Room,
  clubRoom: Boolean,
  oauthMode: string,
  qunUrl: string,
}

interface GameInfo {
  name: string,
  gameId: number,
  component: any,
  images: string,
  width: number,
  height: number
}

declare var window: any

class MainComponent extends eui.Component {
  private tileGroup: eui.Group
  private gameName: eui.Label
  private gameTime: eui.Label
  private roomNo: eui.Label
  private round: eui.Label
  private bottomBtn: eui.Group
  private ruleName: eui.Label
  private backRoomBtn: eui.Image
  private shareBtn: eui.Image
  private oauthMode: string = '';

  public battleData: BattleData
  public gameInfo: GameInfo

  private uiLabelNumber: number = 0

  constructor() {
    super()
    this.battleData = window.battleData
    this.gameInfo = window.gameInfo
    this.once(eui.UIEvent.COMPLETE, this.onComplete, this)
    this.oauthMode = this.battleData.oauthMode;
    let backChatBtn = '', shareChatBtn = '';
    let width = '228'
    if (this.oauthMode == 'open_jh') {
      backChatBtn = `<e:Image id="backChatBtn" width="191" height="87" source="jinhua-back-chat_png"></e:Image>`;
      width = '191'
      shareChatBtn = `<e:Image id="shareBtn" width="${width}" source="jinhua-share-chat_png" height="87"></e:Image>`
    } else {
      shareChatBtn = `<e:Image id="shareBtn" width="${width}" source="btn-share_jinhua_png"  height="87"></e:Image>`
    }
    this.skinName = `<e:Skin class="JinhuaSkin" width="720" height="1166" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
      <e:Image source="jinhuaDi_png" x="0" y="0" width="720" height="1166" touchEnabled="false" locked="true"/>
      <e:Group horizontalCenter="0" percentWidth="86" height="72" top="190">
        <e:Group percentWidth="100" height="36" y="-34" x="0">
          <e:Label id="gameName" textColor="0xf8e5c1" text="" left="0" size="23"></e:Label>
          <e:Label id="gameTime" textColor="0xf8e5c1" text="" left="210" size="23"></e:Label>
        </e:Group>
        <e:Group percentWidth="100" height="36" y="0" x="0">
          <e:Label id="roomNo" textColor="0xf8e5c1" text="" left="0" size="23"></e:Label>
          <e:Label id="round" textColor="0xf8e5c1" text="" left="176" size="23"></e:Label>
          <e:Label id="ruleName" textColor="0xf8e5c1" text="" left="342" size="23"></e:Label>
        </e:Group>
      </e:Group>

      <e:Group id="tileGroup" horizontalCenter="-10" percentWidth="80" left="-10" height="645" top="240">
      </e:Group>
      <e:Label size="20" text="游戏结果仅作娱乐用途,禁止用于赌博行为" right="42" top="935" textColor="0xfdf3f6"></e:Label>
      <e:Group id="bottomBtn" x="0" y="1012" percentWidth="100" height="85">
        <e:Image id="backRoomBtn"  width="${width}" height="87"  source="back-room_jinhua_png"></e:Image>
        ${backChatBtn}
        ${shareChatBtn}
      </e:Group>
    </e:Skin>`
  }

  private onComplete(e: eui.UIEvent) {
    var tLayout:eui.TileLayout = new eui.TileLayout();
    tLayout.horizontalGap = 10
    tLayout.verticalGap = 20
    tLayout.columnAlign = eui.ColumnAlign.JUSTIFY_USING_WIDTH
    tLayout.rowAlign = eui.RowAlign.TOP
    tLayout.paddingTop = 0
    tLayout.paddingRight = 4
    tLayout.paddingLeft = 0
    tLayout.paddingBottom = 0
    tLayout.requestedColumnCount = 3  /// 设置3列显示
    this.tileGroup.layout = tLayout    /// 网格布局

    this.gameName.text = `九天互游 ${this.gameInfo.name}`
    this.gameTime.text = window.util.getDateTime(this.battleData.room.createTime)
    this.roomNo.text = `房号 ${this.battleData.room.roomNo}`
    this.round.text = `局数 ${this.battleData.room.turns}/${this.battleData.room.totalTurns}`

    const roomDescribe = JSON.parse(this.battleData.room.roomDescribe)
    this.ruleName.text = `玩法: ${roomDescribe.ruleType * 10}回合封顶`

    this.battleData.finishList.forEach(player => {
      const userLabel = new UserLabel(player)
      this.tileGroup.addChild(new UserLabel(player))
    })

    if (window.isMiniProgram) {
      this.bottomBtn.removeChild(this.backRoomBtn)
    }
    if(this.battleData.clubRoom){
      this.backRoomBtn.source = 'jinhua-back-club_png'
    }
    var hLayoutBottom:eui.HorizontalLayout = new eui.HorizontalLayout()
    hLayoutBottom.gap = 100
    if (this.oauthMode === 'open_jh') {
      hLayoutBottom.gap = 20
    }
    hLayoutBottom.horizontalAlign = egret.HorizontalAlign.CENTER
    this.bottomBtn.layout = hLayoutBottom

    window.eventDispatcher.addEventListener('ok', function() {
      this.uiLabelNumber++
      console.log('labelOnComplete', this.uiLabelNumber)
      if (this.uiLabelNumber >= this.battleData.finishList.length) {
        this.dispatchEvent(new egret.Event('renderOk'))
      }
    }, this)
  }

}

export default MainComponent